My checkbox input toggles my myDiv using ng-show. I would like this to look fancy. Thus, I'm using a transition effect, using angular-animate.js.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script>
var app=angular.module('ang_app', ['ngAnimate']);
app.controller('ang_control01_main', function($scope) {
});
</script>
<style>
div {
transition: .5s;
height: 100px;
background-color:lightblue;
}
.ng-hide { /* using .ng-show here doesn't work btw */
height: 0;
}
</style>
<body ng-app="ang_app" ng-controller="ang_control01_main">
<input type="checkbox" ng-model="myCheck">
<div id="myDiv" ng-show="myCheck"></div>
</body>
(http://jsfiddle.net/gfwrknpr/)
Works fine.
However, if I change the selector from div to #myDiv, the animation is gone. Why?
change your css to:
#myDiv{
transition: .5s;
height: 100px;
background-color:lightblue;
}
#myDiv.ng-hide { /* using .ng-show here doesn't work btw */
height: 0;
}
and it will work
Related
I have a custom animation that the regular Vue transition doesn't quite cover. I have it implemented elsewhere with a conditional v-bind:class, but that doesn't work well for conditional v-if blocks or v-for groups.
I need to add a class ('open') one frame after the element is entered as with v-enter-to, but I need it to never be removed from the element.
I then need it removed removed when leaving to trigger the closing animation.
Am I using Vue Transition wrong and this is perfectly possible within transition, or is there a way to add/remove the class around the enter/leave functionality?
.accordion {
overflow: hidden;
> div {
margin-bottom: -1000px;
transition: margin-bottom .3s cubic-bezier(.5,0,.9,.8),visibility 0s .3s,max-height 0s .3s;
max-height: 0;
overflow: hidden;
}
&::after {
content: "";
height: 0;
transition: height .3s cubic-bezier(.67,.9,.76,.37);
max-height: 35px;
}
&.open {
max-height: 8000px;
> div {
transition: margin-bottom .3s cubic-bezier(.24,.98,.26,.99);
margin-bottom: 0;
max-height: 100000000px;
position: relative;
}
&::after {
height: 35px;
max-height: 0;
transition: height .3s cubic-bezier(.76,.37,.67,.9),max-height 0s .3s;
}
}
}
<transition name="accordion" :duration="300">
<div class="accordion" v-if="equipmentSelections.length === 0">
<div>
<p>Begin by selecting equipment from the list</p>
</div>
</div>
</transition>
<transition-group name="accordion" :duration="300">
<div v-for="equipment in equipmentSelections" v-bind:key="equipment.unitNumber" class="accordion">
<div>
<h3 v-on:click="updateSelections(equipment)">{{equipment.unitNumber}}</h3>
</div>
</div>
</transition-group>
You can get more power out of the vue transition component by using the javascript hooks.
For example:
Demo: https://codepen.io/KingKozo/pen/QWpBPza
HTML:
<div id="app">
<div>
<button type="button" #click="toggle">Toggle</button>
</div>
<transition name="label" v-on:enter="enter" v-on:before-leave="leave">
<div v-if="isOpen">Hi</div>
</transition>
</div>
CSS
.label-enter-active, .label-leave-active {
transition: opacity 1s;
}
.label-enter, .label-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.staying-visible {
background-color: red;
color: white;
}
Javascript
const vm = new Vue({
el: '#app',
data: {
isOpen: false
},
methods: {
enter(el){
el.classList.add("staying-visible")
},
leave(el){
el.classList.remove("staying-visible")
},
toggle(){
this.isOpen = !this.isOpen
}
}
})
In the example I provided I add a brand new class, "staying-visible", to the element on enter and remove it later on. In the example provided, I remove the class on "before-leave" so as to make the change visible but for your specific use case it seems like you can also just remove it during the 'leave' hook.
To learn more about how to use the javascript transition hooks, check out the official documentation: https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
I am trying to adapt Bootstrap 4 tooltip to display images.
<img src="myimage.png" data-toggle="tooltip" data-html="true" title=\'<img src="myimage.png" class="d-block">\'>
In order to do it I had to add a custom CSS to allow tooltip scale to the width of the image.
.tooltip-inner {
max-width: 100%;
}
.tooltip.show {
opacity: 1;
}
.tooltip img {
margin: 5px 0;
background-color: #333;
}
It works great, however all my regular text tooltips also scale. I would like the text tooltips act as they were. I tried adding class to my code but the issue is actually in the tooltip code that is generated on hover. Is there a way to use my custom CSS only for images?
I think that tooltip's template option could help you to do what you want.
For example, you could create a specific template only for your image, using a specific class to format only its tooltip.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip-image"]').tooltip({
template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner image"></div></div>'
});
});
.tooltip-inner.image {
max-width: 100%;
}
.tooltip.show {
opacity: 1;
}
.tooltip img {
margin: 5px 0;
background-color: #333;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h3>Tooltip Example</h3>
<p>Hover over me</p>
<p><img src="https://picsum.photos/500/300" data-toggle="tooltip-image" data-html="true" title='<img src="https://picsum.photos/500/300" class="d-block">'></p>
</div>
I want to know how to convert this to Ionic application I tried to do that its not work,my code sample
any one know how to put that code correctly in Ionic
I try to make like this example
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="heart"></div>
<script type="text/javascript">/* when a user clicks, toggle the 'is-animating' class */
/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
$(this).toggleClass('is_animating');
});
/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
$(this).toggleClass('is_animating');
});
</script>
<style>.heart {
cursor: pointer;
height: 50px;
width: 50px;
background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
background-position: left;
background-repeat:no-repeat;
background-size:2900%;
}
.heart:hover {
background-position:right;
}
.is_animating {
animation: heart-burst .8s steps(28) 1;
}
#keyframes heart-burst {
from {background-position:left;}
to { background-position:right;}
}</style>
Try this:
.html
<div class="heart is_animating" (click)="toggleClass($event)"></div>
.ts
toggleClass(event){
event.target.classList.toggle('is_animating');
}
Is there a way to change color off a parent when an input gets focus
Check out the demo. I want the div to be red instead of blue when input has focus.
Demo
Here's a bit of a cheaty way of doing it using CSS only...
DEMO: http://jsfiddle.net/gvee/6fRUd/
HTML
<div>
<input type="text" />
</div>
CSS
div {
overflow: hidden;
background-color: blue;
}
div * {
position: relative;
z-index: 10;
}
div input[type=text]:focus {
background-color: red;
box-shadow: 0 0 10000px 10000px lime;
z-index: 5;
}
I think you can't do that in pure CSS, but you can use Javascript:
http://jsbin.com/uvon/1/edit?html,js,output
var input = document.getElementById('input');
var div = document.getElementById('div');
input.onfocus = function(){
input.style.backgroundColor = "red";
div.style.backgroundColor = "red";
}
input.onblur = function(){
input.style.backgroundColor = "white";
div.style.backgroundColor = "blue";
}
A jQuery approach would be using .parent()
<script>$("p").parent(".selected").css("background", "yellow");</script>
http://api.jquery.com/parent/
CSS Only Approach
Fiddle
http://jsfiddle.net/GT5sT/
CSS
input {
position: relative;
z-index: 2;
}
input:focus,
input:focus + div { background-color: red }
div {
position: relative;
background-color: blue;
}
div.background-hack {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
HTML
<div>
<input />
<div class="background-hack"></div>
</div>
You will have to use javascript.
Here is a short script using jquery.
$('#input').focus(function(){
$('#box').css('background-color','red');
});
This is assuming your input has an id of input and blue box has an id of box.
javascript also works here look at the code below,it is more flexible than just using css
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
document.getElementById('box').style.background="red";
}
</script>
<title>JS Bin</title>
</head>
<body>
<div id="box" style="background-color:blue">
<input onfocus="myFunction()" />
</div>
</body>
</html>
I'm trying to animate the height of an element after a class has been applied, here's the simplified code:
HTML
<div class="section">
<div class="panel">
Click
<div class="panel-content">
Some content...
</div>
</div>
</div>
CSS
.section {
position: relative;
width: 500px;
height: 200px;
margin: 100px auto;
background: #ccc;
}
.panel {
width: 65%;
position: absolute;
left: 0;
bottom: 0;
}
.toggle {
display: inline-block;
height: 15px;
background: #ddd;
}
.panel-content {
max-height: 0;
overflow: hidden;
transition: max-height 1s;
}
.active .panel-content {
max-height: 9999px;
}
JS
$(function() {
$('.toggle').on('click', function (e) {
e.preventDefault();
$(this).closest('.panel').toggleClass('active');
});
});
When I click the .toggle link an active class is set on the .panel element to animate the .panel-content height, however when the class is first added the content is shown without animation and when it's removed the element takes one second (the transition's duration) to start animating. You can see a live demo here: http://codepen.io/javiervd/pen/bLhBa
I tried to play with the position and overflow properties as well but I couldn't make it work, maybe there's another way of achieving the same effect?
Thanks in advance.
You need to do a transition when something happens. This isn't what you want, but let me show you something:
.pannel-content{
height:0;
}
.pannel-content:hover{
height:50px; transition:height 2s;
}
This is how transition works. You have not created an action. There is no click Pseudo Class, and you don't want to effect the same element anyways. Try using jQuery, like.
<html>
<head>
<style type='text/css'>
.active .pannel-content{
display:none; height:9999px;
}
</style>
</head>
<body>
<div class='section'>
<div class='panel'>
<a href='#' class='toggle'>Click</a>
<div class='panel-content'>
Some content...
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript'>
$('.toggle').click(function(){
$('.active .pannel-content').show('slow');
});
</script>
</body>
</html>
You could also use jQuery's .animate() method. Of course I would recommend that you use declair a DOCTYPE and use <meta> tags. Also you should use external CSS, as it would be cached in your users Browser memory.
Visit http://api.jquery.com/show/ and http://api.jquery.com/animate/ for details.